<!doctype html>
<html lang="en">
 <head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键词一，关键词二">
  <meta name="Description" content="网站描述内容">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <!--css js 文件的引入-->
<style type="text/css">
*{ margin:0px; padding:0px;}

#Louti{width:120px;/*宽*/ height:520px;/*高*/ 
        position:fixed;/*固定定位*/ left:50px; bottom:0px;}

#Louti ul li{width:120px; height:40px;list-style-type:none;/*去掉圆点*/ color:#fff; font-size:12px; text-align:center;/*文字水平距中*/ line-height:40px;
                background:url("http://images2017.cnblogs.com/blog/947364/201707/947364-20170729075952696-1331591566.png") no-repeat 110px 18px;}

#Louti img.title{display:block;/*元素的类型*/}

#Louti ul li.gray1{background-color:#000 ;}

#Louti ul li.gray2{background-color:#2f2f2f;}

#Louti ul li.gray3{background-color:#ff66cc;}

.box{width:100%;height:700px; background:#ffcc66; font-size:50px; color:#fff;
text-align:center;}
</style>

 </head>
 <body>
<!--div盒子模型，高度，宽度，放内容的长方形  姓名=“代码女神”-->
<div id="Louti">
    <img src="http://images2017.cnblogs.com/blog/947364/201707/947364-20170729080011118-1487559795.png" class="title"/>
    <ul>
        <li class=" gray3">服装服饰专场</li>
        <li>鞋包户外专场</li>
        <li>美妆配饰专场</li>
        <li>数码/食品专场</li>
        <li>优质团购专场</li>
        <li>母婴/家居专场</li>
        <li>淘宝热卖专场</li>
        <li>低价购车专场</li>
    </ul>
    <img src="http://images2017.cnblogs.com/blog/947364/201707/947364-20170729080005024-864106958.png" />
</div>

<div class="box">服装服饰专场</div>
<div class="box" style="background:#ffff66">鞋包户外专场</div>
<div class="box" style="background:#ccff66">美妆配饰专场</div>
<div class="box" style="background:#996600">数码/食品专场</div>
<div class="box" style="background:#66cc00">优质团购专场</div>
<div class="box" style="background:#ff6600">母婴/家居专场</div>
<div class="box" style="background:#ff66ff">淘宝热卖专场</div>
<div class="box" style="background:#ffff66">低价购车专场</div>

<!--引用外部 jquery类库文件-->
<script type="text/javascript">
    $("#Louti ul li").mouseover(function(){
        //添加 class="gary3"
        $(this).addClass("gray3").siblings("li").removeClass("gray3"); 
    });

    $("#Louti ul li").click(function(){
            var _index=$(this).index();
            var _top=$(".box").eq(_index).offset().top;
            $("body,html").animate({scrollTop:_top},500)
    });

    $("#Louti ul li:even").addClass("gray1");
    $("#Louti ul li:odd").addClass("gray2");

</script>

<!--

    1、如何在页面当中，构建一个有宽度，高度的长方形（div盒子模型）
    2、利用固定定位，把长方形固定在左下角不动 position:fixed; left:左边距离 bottom:下面的距离
    3、如何在页面当中，插入一张图片 <img src="地址"/>
    4、讲到 ul无序列表标签来制作菜单效果 结构 <ul>
                                                 <li>11111</li>
                                                 <li>2222</li>
                                              </ul>
    5、给每个 li添加宽度和高度，如何去掉li前端的圆点list-style-type:none;
    6、讲到外边距 margin　和内边距 padding的概念 ， ul会有自带的默认的左内边距和上外边距，处理方法，*{margin:0px; padding:0px;}
    7、要消除图片与下面列表的间距，给 图片加上  display:block;
    8、单独给每个li　加下样式名，然后分别控制他们的背景颜色 （文字颜色，大小，水平距中 ，竖直距中）

-->
 </body>
</html>